<template>
    <el-form-item
        class="widget-view"
        v-if="element && element.key"
        :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
        @click.native.stop="handleSelectWidget(index)"
    >
        <component :is="element.type" :data="element"/>

        <el-button title="删除" @click.stop="handleWidgetDelete(index)" class="widget-action-delete" v-if="selectWidget.key == element.key" circle plain type="danger">
            <i class="iconfont2 icon-trash"/>
        </el-button>
        <el-button title="复制" @click.stop="handleWidgetClone(index)" class="widget-action-clone" v-if="selectWidget.key == element.key" circle plain type="primary">
            <i class="iconfont2 icon-icon_clone"/>
        </el-button>
    </el-form-item>
</template>

<script>
import { Cell, CellGroup } from 'vant'
import Template from './template'
export default {
    components: {
        ...Template,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup
    },
    props: ['element', 'select', 'index', 'data'],
    data() {
        return {
            selectWidget: this.select,
            result: ['a', 'b']
        }
    },
    watch: {
        select(val) {
            this.selectWidget = val
        },
        selectWidget: {
            handler(val) {
                this.$emit('update:select', val)
            },
            deep: true
        }
    },
    methods: {
        goLink(type, url, query) {
            if (type === 'inline') {
                const param = query ? JSON.parse(query.replace(/'/g, '"')) : null
                this.gotoMyehrPath(url, param)
            } else {
                window.open(url)
            }
        },
        handleSelectWidget(index) {
            this.selectWidget = this.data.list[index]
        },
        handleWidgetDelete(index) {
            if (this.data.list.length - 1 === index) {
                if (index === 0) {
                    this.selectWidget = {}
                } else {
                    this.selectWidget = this.data.list[index - 1]
                }
            } else {
                this.selectWidget = this.data.list[index + 1]
            }

            this.$nextTick(() => {
                this.data.list.splice(index, 1)
            })
        },
        handleWidgetClone(index) {
            let cloneData = {
                ...this.data.list[index],
                options: { ...this.data.list[index].options },
                key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
            }

            if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        options: cloneData.options.options.map(item => ({ ...item }))
                    }
                }
            }
            if (this.data.list[index].type === 'img' || this.data.list[index].type === 'title') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        style: { ...this.data.list[index].options.style }
                    }
                }
            }

            this.data.list.splice(index, 0, cloneData)

            this.$nextTick(() => {
                this.selectWidget = this.data.list[index + 1]
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .widget-form-container .widget-form-list .widget-view{
        padding: 1px 1px 2px;
        border-left: 1px solid transparent;
    }
    .widget-form-container .widget-form-list .widget-view.active{
         border-left: 1px solid transparent;
    }
    .widget-form-container .widget-form-list .widget-view:hover{
        padding: 1px 1px 2px;
        border-left: 1px solid transparent;
    }
    .widget-form-container .widget-form-list .widget-action-clone,.widget-form-container .widget-form-list .widget-action-delete{
        bottom: -16px;
    }
    .van_cell{
        background: #fff;
    }
    .van_cell_title{
        padding-left: 12px;
        border-bottom: 1px solid #f8f8f8;
    }
    .van-cell__title{
        width: 80px;
        flex: none;
    }
    .van-cell_value{
        flex: 1;
        text-align: right;
    }
    .van-progress{
        top: 8px;
    }
</style>
